 <template>
          <div class="crumbs">
            <el-breadcrumb separator="/">
                <h3 style="color #DDDDDD">当前位置:基础信息功能/教室设置</h3>
            </el-breadcrumb>
        </div>
  <el-button  class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-upload"
         @click="open">添加</el-button>
      
      <el-button
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-upload"
        @click="dialogVisible = true"
      >批量导入</el-button>
<el-dialog :title="titles" v-model="dialogFormVisible">
      <el-form :model="form" :rules="addFormRules" ref="addFormRef">
        <el-form-item label="教室编号" label-width="100px">
         <el-input v-model="form.classroomid" />
        </el-form-item>
      </el-form>
      <el-form :model="form">
        <el-form-item label="教室名称" label-width="100px">
          <el-input v-model="form.classroomname" />
        </el-form-item>
      </el-form>
      <el-form :model="form">
        <el-form-item label="教室座位数" label-width="100px">
          <el-input v-model="form.classsize" />
        </el-form-item>
      </el-form>
      <el-form :model="form">
        <el-form-item label="考试座位数" label-width="100px">
          <el-input v-model="form.kszw" />
        </el-form-item>
      </el-form>
      <el-form :model="form">
        <el-form-item label="校区" label-width="100px">
          <el-input v-model="form.xq" />
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitCheck">确 定</el-button>
      </div>

</el-dialog>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="classroomid"
        label="教室编号"
        width="250">
      </el-table-column>
      <el-table-column
        prop="classroomname"
        label="教室名称"
        width="250">
      </el-table-column>
      <el-table-column
        prop="classsize"
        label="教室座位数"
        width="250"
        >
      </el-table-column>
      <el-table-column
        prop="kszw"
        label="考试座位数"
        width="250"
        >
      </el-table-column>
      <el-table-column
        prop="xq"
        label="校区"
        width="250"
        >
      </el-table-column>
    <el-table-column
    prop="operation"
    label="操作"
     width="250">
        <template #default="scope">

            <el-button type="primary" @click="updateId(scope.row)">编辑</el-button>
            <el-button type="danger" @click="deleteID(scope.row)">删除</el-button>
        </template>
    </el-table-column>
    </el-table>

     <el-pagination
             background
             @current-change="getpage"
             current-page.sync="5"
             :page-size="currentPage.limit"
             layout="total, prev, pager, next"
             :total="currentPage.current">
     </el-pagination>
      <el-dialog title="批量导入" v-model="dialogVisible">
            <el-form-item >
            选择Excel:
                 <upload-excel-component  :on-success="handleSuccess" :before-upload="beforeUpload" />
            </el-form-item>
        </el-dialog>

 </template>
<script type=“module” >
  import UploadExcelComponent from '../components/UploadExcel/index.vue'
  import{basetable,addgouji2,deletegoujiID2} from '../api/index.js'
     export default {
          components: { UploadExcelComponent },
        created(){
           this.getdata(this.currentPage);
        },
        methods: {
            //上传之前  你可以获得文件做一些个性化设置
    beforeUpload(file) {
        console.log(file)
      const isLt1M = file.size / 1024 / 1024 < 1
      if (isLt1M) {
        return true
      }
      this.$message({
        message: 'Please do not upload files larger than 1m in size.',
        type: 'warning'
      })
      return false
    },   
    //成功
     handleSuccess({ results, header }) {
		 var a=[];
		 var w = {};
		 for(var i=0;i<results.length;i++){
		 		 var x = JSON.parse(JSON.stringify(results[i]).replace(/教室编号/g,"classroomid"));
		 		 var y = JSON.parse(JSON.stringify(x).replace(/教室名称/g,"classroomname"));
		 		 var z = JSON.parse(JSON.stringify(y).replace(/教室座位数/g,"classsize"));
		 		 var q = JSON.parse(JSON.stringify(z).replace(/考试座位数/g,"kszw"));
		 		 w = JSON.parse(JSON.stringify(q).replace(/校区/g,"xq"));
		 		 
		 		 addgouji2(w).then(Object => {
		 		     this.getdata(this.currentPage);
		 		     this.dialogFormVisible = false;
		 		 
		 		 })
		 		 
		 }
		 this.dialogVisible = false;
		 this.$message({
		   message: '导入成功!',
		   type: 'success'
		 });

    },
          open(){
              console.log(this.dialogFormVisible)
              this.dialogFormVisible = true;
              this.form.pkId=0;
              this.titles='添加'
          },
          add(){
          },
            deleteID(row) {
				this.$confirm('确认删除?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					deletegoujiID2(row).then(Object => {
						if(Object){
							
												    this.getdata(this.currentPage);
													this.$message({
												type: 'success',
												message: '删除成功!'
							});
						}else{
							this.$message({
												type: 'warning',
												message: '此纪录已关联，无法删除!'
							});
						}
					
					})
				  
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '已取消删除'
				  });          
				});
               
            },
            updateId(row) {
                this.form = row;
                this.dialogFormVisible = true;
                this.titles = '编辑';

            },

            submitCheck() {
                this.$refs.addFormRef.validate(valid => {
                    addgouji2(this.form).then(Object => {
                        this.getdata(this.currentPage);
                        this.dialogFormVisible = false;

                    })
                })

            },





          getpage(val){
            console.log(val)
            this.currentPage.page=val;
            this.getdata(this.currentPage);
          },
          getdata(val){
            basetable(val).then(Object=>{
              this.tableData=Object.records[0];
                console.log(Object);
                this.currentPage.current = Object.rowCount;

                console.log(this.currentPage.page);
            })
          },
            handleClick(row) {
                console.log(row);
            },
            page(currentPage){
                this.currentPage.current=currentPage;
                 this.getdata();
            }
        },
        data() {
            return {
              dialogVisible:false,
                dialogFormVisible: false,
                titles:'',
                total: null,
                tableData: null,
                currentPage:{
                  page:1,
                  total:20,
                  count:50,
                  current:10,
                  limit:10
                },form: {
                    pkId:0,
                  classroomid: '',
                  classroomname: '',
                  classsize: '',
                  kszw: '',
                  xq: ''
                }
            }
        }
    }
</script>
